import Matter from "matter-js";

const dropMatter = {};

dropMatter.ballPool = () => {
	try {
		if (typeof MatterWrap !== "undefined") {
			// either use by name from plugin registry (Browser global)
			Matter.use("matter-wrap");
		} else {
			// or require and use the plugin directly (Node.js, Webpack etc.)
			Matter.use(require("matter-wrap"));
		}
	} catch (e) {
		// could not require the plugin or install needed
	}

	var Engine = Matter.Engine,
		Render = Matter.Render,
		Runner = Matter.Runner,
		Composite = Matter.Composite,
		Composites = Matter.Composites,
		Common = Matter.Common,
		MouseConstraint = Matter.MouseConstraint,
		Mouse = Matter.Mouse,
		Bodies = Matter.Bodies;

	// create engine
	var engine = Engine.create(),
		world = engine.world;

	// create renderer
	var render = Render.create({
		element: document.body,
		engine: engine,
		options: {
			width: 800,
			height: 600,
			showAngleIndicator: true,
		},
	});

	Render.run(render);

	// create runner
	var runner = Runner.create();
	Runner.run(runner, engine);

	// 整个身体
	Composite.add(world, [
		Bodies.rectangle(400, 600, 1200, 0, {
			isStatic: true,
		}),
	]);

	var context = engine.render.context;

	context.drawImage(
		"https://i0.hdslb.com/bfs/live/1df52a9b0a659041937109ff80209d8c2ed559c7.gif",
		100,
		100
	);

	// add mouse control
	var mouse = Mouse.create(render.canvas),
		mouseConstraint = MouseConstraint.create(engine, {
			mouse: mouse,
			constraint: {
				stiffness: 0.2,
				render: {
					visible: false,
				},
			},
		});

	Composite.add(world, mouseConstraint);

	// keep the mouse in sync with rendering
	render.mouse = mouse;

	// fit the render viewport to the scene
	Render.lookAt(render, {
		min: { x: 0, y: 0 },
		max: { x: 800, y: 600 },
	});

	// wrapping using matter-wrap plugin
	var allBodies = Composite.allBodies(world);

	for (var i = 0; i < allBodies.length; i += 1) {
		allBodies[i].plugin.wrap = {
			min: { x: render.bounds.min.x - 100, y: render.bounds.min.y },
			max: { x: render.bounds.max.x + 100, y: render.bounds.max.y },
		};
	}

	// context for MatterTools.Demo
	return {
		engine: engine,
		runner: runner,
		render: render,
		canvas: render.canvas,
		stop: function() {
			Matter.Render.stop(render);
			Matter.Runner.stop(runner);
		},
	};
};

dropMatter.ballPool.title = "Ball Pool";
dropMatter.ballPool.for = ">=0.14.2";

export default dropMatter;
